<template>
    <div v-if="visible" class="leaveTime" @touchmove.prevent  @click.stop="cancel">
        <!--<div>当前选中值:{{month}}</div>
        <div>当前选中值:{{month}}</div>
        
        <div>当前选中值:{{day}}</div>-->
        <div class="confirmBtn" @touchend.stop>
            <span class="lf btn" @click="cancel">取消</span>
            <span class="rt btn" @click="confirm">确定</span>
        </div>
        <div class="switchContainer" @click.stop>
            <mt-switch v-model="isMorning" @change="changeMorning">上午</mt-switch>
            <mt-switch v-model="isSupper" @change="changeSupper">下午</mt-switch>
        </div>
        <pd-select-box style="position: fixed;bottom: 0rem;width: 100%" @click.stop.native>
            <pd-select-item :listData="listData1" v-model="yearOne"></pd-select-item>
            <pd-select-item :listData="listData"  v-model="monthOne"></pd-select-item>

            <pd-select-item :listData="listData2"  v-model="day"></pd-select-item>
        </pd-select-box>
    </div>
</template>
<script>
import Vue from 'vue'
import { Switch } from 'mint-ui'
Vue.component(Switch.name, Switch);
import pdSelectItem from '@/components/salary/components/selectitem.vue'
import pdSelectBox from '@/components/salary/components/slectBox.vue'
export default {
    name: 'pdIosSelect',
    data() {
        return {
            listData: Array.from({ length: 12 }, (value, index) => {
                var res = 1 + index > 9 ? 1 + index : '0' + (1 + index);
                return (res + "月");
            }),
            listData2: Array.from({ length: 31 }, (value, index) =>  {
                var res = 1 + index > 9 ? 1 + index : '0' + (1 + index);
                return (res + "日");
            }),
            listData1: Array.from({ length: 5 }, (value, index) => (index-1 + new Date().getFullYear()) + '年'),
            monthOne: (new Date().getMonth())+1 + '月',
            day:new Date().getDate() + "日",
            yearOne: new Date().getFullYear() + "年",
            monthTwo: null,
            yearTwo: null,
            isMorning:true,
            isSupper:false,
            daySave:null,
            daySave1:'31日',

        }
    },
    methods: {
        cancel: function() {
            this.$emit('update:visible', false);
        },
        filterDate:function(val){
            return val.slice(0,val.length-1);
        },
        confirm: function() {
            var chinaTitle = this.isMorning ? "上午" : "下午";
            var val = this.filterDate(this.yearOne) +'.'+ this.filterDate(this.monthOne) + "." + this.filterDate(this.day)+" "+chinaTitle;
            this.$emit("input", val);
            this.$emit('search');
            this.cancel();
        },
        changeMorning:function(val){
            !val ? (this.isSupper = false) : (this.isSupper = true);
        },
        changeSupper:function(val){
            !val ? (this.isMorning = false) : (this.isMorning = true);
        },
        getDaysInMonth: function(year, month) {
            if (!year || !month) { return; }
            year = parseInt(year, 10);
            month = parseInt(month, 10);
            var temp = new Date(year, month, 0);
            return temp.getDate();
        }


    },
    watch: {
        yearOne: function(newVal, oldVal) {
      
            if (!this.yearOne || !this.monthOne) { return; }
            var length = this.getDaysInMonth(this.yearOne, this.monthOne);
            this.listData2 = Array.from({ length: length }, (value, index) =>  {
                var res = 1 + index > 9 ? 1 + index : '0' + (1 + index);
                return (res + "日");
            });
            Vue.nextTick(() => {

                this.day = this.daySave;
                console.log(this.day,'daySave');

            })
            

        },
        monthOne: function(newVal, oldVal) {
      
            if (!this.yearOne || !this.monthOne) { return; }
            var length = this.getDaysInMonth(this.yearOne, this.monthOne);
            console.log(this.day,'this.day0');
            this.listData2 = Array.from({ length: length }, (value, index) => {
                var res = 1 + index > 9 ? 1 + index : '0' + (1 + index);
                return (res + "日");
            });
            console.log(this.day,'this.day');
            Vue.nextTick(() => {
  
                this.day = this.daySave;
                console.log(this.day,'daySave');
            })
        },
        isSupperShow:function(newVal,oldVal){
            // if (!newVal) {
            //     return;
            // }
            // this.isSupper = newVal;
            // this.isMorning = !newVal;
        },
        value: function(newVal, olaVal) {
            let arr = newVal.split(" ");
            
            if (arr.length > 1) {
                var resultArr = arr[0].split('.');
                this.yearOne = resultArr[0] + '年';
                this.monthOne = resultArr[1] + '月';
                this.day = resultArr[2] + '日';


                this.isSupper = arr[1] === '上午' ? false : true;
                this.isMorning = !this.isSupper;

            } else {

            }
        }

    },
    components: {
        pdSelectItem,
        pdSelectBox,
        'mt-switch': Switch
    },
    created: function() {
        let arr = this.value ? this.value.split(" ") : [];

        if (arr.length) {
            var indexOne = arr[0].indexOf(".");
            var indexTwo = arr[0].indexOf('.',indexOne+1);
            this.day = arr[0].slice(indexTwo+1)+"日";
            this.daySave = this.day;
            this.yearOne = arr[0].slice(0,indexOne)+"年";
            this.monthOne = arr[0].slice(indexOne+1,indexTwo)+"月";
            
            this.isMorning = arr[1] === "上午" ? true : false;
            this.isSupper = !this.isMorning;
        } else {
     
            var month = new Date().getMonth()+1 ;
            var year = new Date().getFullYear() +"年";
            var day = new Date().getDate();
            var monthNew = month > 10 ? month : '0' + month;
            var dayNew = day> 9 ? day : '0' + day;
            this.day = dayNew + '日';
            this.daySave = this.day;
            this.yearOne = year;
            this.monthOne = monthNew + '月';
            this.isSupper = this.isSupperShow;
            this.isMorning = !this.isSupperShow;

           
        }

    },
    mounted: function() {

    },
    props: {
        visible: {
            type: Boolean,
            default: false
        },
        value: {},
        isSupperShow:{
            type:Boolean,
            default:false,
        }
    }
}
</script>
<style scoped lang='less'>
.confirmBtn {
    position: fixed;
    bottom: 4.7rem;
    height: 0.7rem;
    background-color: #fff;
    line-height: 0.7rem;
    width: 100%;
    .btn {
        color: #38a0dc;
        width: 0.8rem;
        margin: auto 0.3rem;
        font-size: 0.36rem;
        height: 0.6rem;
    }
}

.switchContainer {
    position: fixed;
    bottom: 4rem;
    width: 100%;
    height: 0.7rem;
    background-color: #fff;
    line-height: 0.7rem;
    border-bottom:0.02rem solid #eee;
}
// .leaveTime >div{
//     background:#F3F3F3;
// }
.leaveTime{
    position: fixed;
    top:0;
    bottom:0;
    left: 0;
    right: 0;
    background:rgba(162,164,163,0.3);

}
</style>
<style>
    .leaveTime .switchContainer .mint-switch {
        width: calc(50% - 0.04rem);
        text-align:center;
        padding-left:1.2rem;
        margin:0;
        border:none;
    }

</style>

